<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title></title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引用Vue -->
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		
		<script type="text/javascript" src="js/axios.js"></script>
		<script type="text/javascript" src="js/qs.js"></script>
		
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.app {
				width: 750px;
				height: auto;
				font-size: 12px;
			}
			
			.title {
				width: 96%;
				height: 50px;
				margin: 10px auto;
				border-bottom: 1px solid darkgray;
			}
			
			.title h4 {
				font-size: 18px;
				font-weight: 500;
				color: #000 !important;
				margin-top: 10px;
			}
		</style>
	</head>

	<body>
		<div id="app" class="app">
			<div class="title">
				<h4 style="float: left;">产品信息</h4>
				<span style="float: right;"><el-button @click="onSubmit('goodForm')"><i class="el-icon-check"></i>保存</el-button></span>
			</div>
			<el-form ref="goodForm" :model="goodForm" :rules="rules" label-width="100px" enctype="multipart/form-data">
				
					<el-form-item label="品名">
						<el-col :span="8">
						<el-form-item  prop="gname">
						<el-input v-model="goodForm.gname"></el-input>
						</el-form-item>
						</el-col>
						<el-col :span="12" :offset="2">
					<el-form-item label="分类" prop="catid">
						<div class="block">
						  <el-cascader v-model="goodForm.catid"  placeholder="产品分类" 
						    expand-trigger="hover"
						    :options="options"
						    filterable
						    change-on-select>
						    </el-cascader>
					</div>
					</el-form-item>
						</el-col>
				</el-form-item>
				
					<el-form-item label="编号/条码">
						<el-col :span="8">
						<el-form-item prop="gid">
						<el-input v-model="goodForm.gid"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12" :offset="2">
					<el-form-item label="状态" prop="gstatus">
					<el-select placeholder="未选" v-model="goodForm.gstatus">
							<el-option label="正常" :value="506"></el-option>
							<el-option label="停售" :value="507"></el-option>
					</el-select>
			</el-form-item>
			</el-col>
			</el-form-item>
			
					<el-form-item label="库存">
						<el-col :span="8">
						<el-form-item prop="gspec">
						<el-input v-model="goodForm.gspec" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="10" :offset="2">
						<el-form-item label="单位" prop="gunit">
						<el-select v-model="goodForm.gunit">
							<el-option label="个" :value="501"></el-option>
							<el-option label="台" :value="502"></el-option>
							<el-option label="件" :value="503"></el-option>
							<el-option label="箱" :value="504"></el-option>
							<el-option label="本" :value="505"></el-option>
						</el-select>
					</el-form-item>
					</el-col>
					<el-col :span="2" style="margin-left: 10px;">
						<el-button type="info" icon="el-icon-edit" circle size="mini"></el-button>
					</el-col>
					</el-form-item>
					
					<el-form-item label="价格">
						<el-col :span="8">
						<el-form-item prop="gprice">
						<el-input v-model="goodForm.gprice"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12" :offset="2">
					<el-form-item label="保质期" prop="ddtime">
					<el-input v-model="goodForm.ddtime"></el-input>
			</el-form-item>
			</el-col>
			</el-form-item>
					
					{{goodForm.gimg}}
				<el-form-item label="产品图片" prop="gimg">
				<img v-if="imageUrl" v-model="goodForm.gimg" :src="imageUrl" style="width: 70px; height: 70px" />
								   <el-upload 

  									action="/upload"
  									:show-file-list="false"
  									:on-success="handleAvatarSuccess"
  									:before-upload="beforeAvatarUpload"
  									:on-preview="handlePreview"
  									:on-remove="handleRemove"
  									:before-remove="beforeRemove"
  									multiple
  									:file-list="fileList"
  									:limit="3"

  									:on-exceed="handleExceed"
  									:file-list="fileList"> 
  									 

  									<el-button size="small" type="primary">点击上传</el-button>
  									<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
								 </el-upload>


				</el-form-item>
			</el-form>
			<div class="title">
				<span style="float: right;"><el-button @click="onSubmit('goodForm')"><i class="el-icon-check"></i>保存</el-button></span>
			</div>

		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data() {
					return {
						 imageUrl: '',
						dialogImageUrl: '',
				         dialogVisible: false,
						options: [{
				             children: []
				           }],
						goodForm: {
							gname: '',
							catid: [],
							gid: '',
							gstatus: '',
							gspec: '',
							gunit: '',
							gprice:'',
							ddtime:'',
							gimg:'',
							id:'',
							file:''
						},
						rules: {
							gname: [{
								required: true,
								message: '品名不能为空',
								trigger: 'blur'
							}],
							catid: [{
								required: true,
								message: '类别不能为空',
								trigger: 'blur'

							}],
							gprice: [
								//数据类型要是date
								{
									required: true,
									message: '请输入价格',
									trigger: 'blur'
								},
								{pattern: /^[0-9]/, message: '金额格式错误'}
							]
							/* ddtime: [
								//数据类型要是date
								{
									required: true,
									message: '请输入保质期',
									trigger: 'blur'
								},
								{pattern: /^\d{1,2}$/, message: '保质期格式错误'}
							], */
						}
					}
				},
				created:function(){ 	this.getcategory();
				},
				methods: {
					getcategory(){
				    	  var $this=this;
				    	  console.log("产品类别：");
					    	 /* 产品分类 */
								 axios.post("/categoryAll"
				           			).
				           			then(function(v){
				           				var p_id=[];
				           				var cid='';
				           				console.log("产品分类");  
				           				   v.data.forEach(function(da){
				           					var child=[];
				           					if(da.pid=="0"){
					           			  		p_id.push({"value":da.cat_id,"label":da.cat_name,"children":child});
			           					   		cid=da.cat_id;
				           					} 
				           					v.data.forEach(function(da){
				           						console.log(cid); 
				           						if (cid==da.pid) {
				           							child.push({"value":da.cat_id,"label":da.cat_name});
											   }
				           					});  
				           				});  
				           				  $this.options=p_id; 
				           				console.log($this.options); 
				            	}).catch(function(e){
				           		console.log("产品类别：" +e);
				           	}); 
				      },
				      
				      handleRemove(file, fileList) {
				          console.log(file, fileList);
				        },
				        handlePreview(file) {
				          console.log(file);
				        },
				        handleAvatarSuccess(res, file) {
				    		
				            this.imageUrl = URL.createObjectURL(file.raw);
				            this.goodForm.file = file;
				          },
					onSubmit(formName) {
				    	//验证方法
				        this.$refs[formName].validate((valid) => {
				          if (valid) {
				        	  //------------------------
				        	  var par = null;
								if (JSON.stringify(${good}) === '{}') {
								    par = "/addgood";
								    
								}else{
									 par = "/editgoodForm";
									 this.goodForm.id = ${good.goo_id}+"";
								}
								//-------------------------------------
				        	  //post提交数据
				           	axios.post(par,
				           			//参数转换
				           			Qs.stringify(this.goodForm,{arrayFormat: 'brackets'})
				           			//ajax请求成功的回调函数
				           			).then(function(v){
				           			window.parent.location.replace("/glist");
				           			console.log("回调成功，获取了服务器端返回的值v");
				           	}).catch(function(e){
				           		alert("出错了"+e);
				           	});
				        	  
				        	  
				          } else {
				            console.log('error submit!!');
				          }
				        });
				      }
				},
				mounted() {
					var s = ${good};
					console.log(s);
					if(s){
						this.goodForm.gname = s.goo_name;
						this.goodForm.options = s.cat_id;
						this.goodForm.gid = s.goo_id;
						this.goodForm.gstatus = s.goo_status;
						this.goodForm.gspec = s.goo_spec;
						this.goodForm.gunit = s.goo_gunit;
						this.goodForm.gprice = s.goo_price;
						this.goodForm.ddtime = s.ddtime;
						//this.goodForm.gimg = s.goo_img;
						this.goodForm.catid = [s.fulei,s.zilei];
					}	
				}
				
				
				
			})
		</script>
	</body>

</html>